/*
 * @Author: yangzonglong
 * @Date: 2021-03-09 16:03:48
 * @version: v1.0.0
 * @Descripttion: 列
 * @LastEditors: 871387321@qq.com 871387321@qq.com
 * @LastEditTime: 2023-10-27 13:11:29
 * @Auditor:
 */
import React, { useCallback } from 'react';
import { Form, Button } from 'antd';
import update from 'immutability-helper';
import ColumnItem from './ColumnItem';
import Icon from '../../icon/Icon';
import { TabsOptionProps } from '../interface'
import styles from './style.module.scss';

const FormItem = Form.Item

interface ColumnsProps {
  addTabs: () => void;
  deleteTabs: (index: number) => void;
  moveTabs: (tabsOption: TabsOptionProps[]) => void;
  setCurColumn: (tabsOption: TabsOptionProps, index: number) => void;
  tabsOption: TabsOptionProps[];
}

const Columns = ({ addTabs, deleteTabs, moveTabs, setCurColumn, tabsOption }: ColumnsProps) => {

  const move = useCallback(
    (draggedId: string, hoverId: string) => {
      let draggedIndex: number = 0,
        hoverIndex: number = 0;

      tabsOption.forEach((item, index) => {
        if (item.id === draggedId) draggedIndex = index;
        if (item.id === hoverId) hoverIndex = index;
      });

      moveTabs(update(tabsOption, {
        $splice: [
          [draggedIndex, 1],
          [hoverIndex, 0, tabsOption[draggedIndex]],
        ],
      }))

    },
    [moveTabs, tabsOption]
  );

  return (
    <>
      <FormItem label="选项卡">
        <ul className={styles.options}>
          {tabsOption.map((item, i) => (
            <ColumnItem
              move={move}
              deleteTabs={() => deleteTabs(i)}
              setCurColumn={() => setCurColumn({ ...item }, i)}
              item={item}
              key={item.id} />
          ))}
        </ul>
        <p />
        <Button icon={<Icon icon="&#xe635;" />} className={styles.btnStyle} block onClick={addTabs}>
          添加tab
        </Button>
      </FormItem>
    </>
  );
};

export default Columns;
